<template>
  <!-- 面包屑导航 -->
    <div style="margin-top: 20px; margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><b>我的课堂</b></el-breadcrumb-item>
            <el-breadcrumb-item @click=" router.push('/classStart/teacherCourseInfo')">课程信息</el-breadcrumb-item>
            <el-breadcrumb-item>查看请假学生页面</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
  <!-- 表格 -->
    <div class="table-container">
        <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="snumber" label="学号" />
            <el-table-column prop="sname" label="学生姓名" />
            <el-table-column prop="leaveType" label="请假类型" />
            <el-table-column prop="startTime" label="起始时间" />
            <el-table-column prop="endTime" label="结束时间" />
            <el-table-column prop="contact" label="联系方式" />
            <el-table-column prop="state" label="请假状态">
                <template #default="scope">
                    <el-button plain :type="getButtonType(scope.row)">
                        {{ getButtonText(scope.row) }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="reason" label="审核理由" show-overflow-tooltip />
        </el-table>
    </div>
  <!-- 分页按钮 -->
    <div class="demo-pagination-block">
        <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import request8090 from "../../../../utils/request8090.js";
import router from "../../../../router/index.js";
const tableData = ref([]);
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
});
// 获取页面数据
const fetchLeaveInfo = () => {
    request8090({
        url: '/teacher/getcoursestudentleave',
        method: 'GET',
        params: {
            currentPage: pagination.value.currentPage,
            size: pagination.value.pageSize,
            courseNumber: sessionStorage.getItem('courseNumber'),
        },
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                tableData.value = res.data.data.records;
                pagination.value.total = res.data.data.total;
            } else {
                ElMessage.error('获取数据失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
};
// 根据分页大小刷新页面
const handleSizeChange = (size) => {
    pagination.value.pageSize = size;
    fetchLeaveInfo();
};
// 根据当前页刷新页面
const handleCurrentChange = (page) => {
    pagination.value.currentPage = page;
    fetchLeaveInfo();
};
// 获取按钮类型
const getButtonType = (row) => {
    if (row.state === 1) {
        return 'success';
    } else if (row.state === 2) {
        return 'danger';
    } else {
        return 'info';
    }
};
// 获取按钮文本
const getButtonText = (row) => {
    if (row.state === 1) {
        return '已批准';
    } else if (row.state === 2) {
        return '已驳回';
    } else {
        return '未审批';
    }
};
// 获取请假信息
onMounted(() => {
    fetchLeaveInfo();
});
</script>

<style scoped>
/* 你的样式代码 */
</style>
